---
layout: page
title : 小地图提示器

---

<style type="text/css">
    #reminder {
        margin: 30px;
        /* background: #1fa7be; */
        text-align: center;
    }

    #input {
        background: rgba(89, 139, 212, 0.3);
        border: none;
        text-align: center;
        /* margin: 10px; */
        width: 30px;
        /* display: inline;  */
    }

    button {
        margin: 20px;
        padding: 5px, 30px !important
    }


</style>


<div id='reminder'>
    <audio id="audio" src='/assets/chimes.wav'></audio>
    <h4>优秀的游戏玩家看小地图的频率不低于10秒每次</h4>
    <br>
    <p>请输入时间间隔，单位秒</p>
    <input type="text" id='input' , value='5'>
    <br>
    <button id='start'>开始</button>
    <button id='end'>结束</button>
    <p id='last'></p>
</div>

<script type="text/javascript">
    var start = document.getElementById('start');
    var end = document.getElementById('end');
    var input = document.getElementById('input');
    var audio = document.getElementById('audio');
    var last = document.getElementById('last');
    var time = input.value;
    var t = null;
    var i = 0;

    input.addEventListener("focus",function(){
        clearInterval(t)
        if (input.value == time) {
            input.value="";
        }
    })
    input.addEventListener("focus",function(){
        if(input.value == ""){
            input.value=time;
        }
        time = input.value;
    })
    start.addEventListener("click",function(){
        clearInterval(t)
        t = setInterval(function () {
            if (i % parseInt(time) === parseInt(time) - 1) {
                audio.play();
            }
            i++;
            last.innerHTML = '进度指示：' + i % parseInt(time);
        }, 1000)    
    })

    end.addEventListener("click",function(){
        clearInterval(t);
    })


    //通过定时器实现
    // start.on('click',function(){
    //     clearInterval(timer);
    //     timer = setInterval(() => {
    //         audio.play();
    //     }, parseInt(time)*1000);
    // })

    // end.on('click',function(){
    //     clearInterval(timer);
    //     // audio.pause();
    // })
</script>